<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>心</title>
		<style>
			/* 抓div元素  心主体 */
			div{
				width: 200px;
				height: 200px;
				background-color: #e74d4f;
				/* 自适应居中 */
				margin: 250px auto;
				transform: rotate(135deg);
				/* 透明度属性：属性值0~1 范围值 */
				opacity: .8;
				/* 滤镜属性：光晕：下阴影
				 drop-shadow（）
				 */
				filter: drop-shadow(0 0 100px #e96163);
				/* 动画属性 ：关键帧名称 过渡时间 过渡方式*/
				animation: heart .8s linear infinite;
				
			}
				/* 伪类选择器：给元素附加上效果的选择器 
				   语法：div：hover{} 当鼠标悬停到div上实现的【样式】效果
				   需求：鼠标悬停到中间心位置改成圆
				   选择器：before 在元素之前添加文本 通常与content：""
				   选择器：after  在元素之后添加文本 通常与content：""
				*/
			   /* 伪类选择器在div上方增加文本*/
			div:before{
				content:"";/* 行转块 */
				/* 显示属性 
				display:block;转成块级元素
				display: inline;转成行级元素
				display: none; 元素消失
				*/
				display: block;
				width: 200px;
				height: 200px;
				background-color: #e74d4f;
				border-radius: 180px;
				position: relative;
				left: -100px;
				
				
				}
				
			div:after{
				content:"";
				display: block;
				width: 200px;
				height: 200px;
				background-color: #e74d4f;
				border-radius: 180px;
				position: relative;
				top:-100px
			}	
			/* 动画 */
			/* 1.创建关键帧--手翻书 */
			@keyframes heart {
				/* 3个画面：①等比例出现，防止跳帧②缩小比例③放大比例 */
				0%{
					/*转换属性：缩放 属性值
					 1表示等比例
					 .8表示缩小0.8倍
					 1.2表示放大1.2倍
					 transform复合属性：旋转 缩放
					  */
					transform:rotate(135deg) scale(1);
				}
				20%{
					transform:rotate(135deg) scale(.8) ;
				}
				30%{
					transform:rotate(135deg) scale(.7)
				}
				40%{
					transform:rotate(135deg) scale(1.1)
					}
				50%{
					transform:rotate(135deg) scale(1.2)
				}
				60%{
					transform:rotate(135deg) scale(1.3)
				}
				70%{
					transform:rotate(135deg) scale(1.4)
				}
				80%{
					transform:rotate(135deg) scale(1.5)
				}
				90%{
					transform:rotate(135deg) scale(1.6)
				}
				100%{transform:rotate(135deg) scale(1.7);
				
				
				}
				}
			
			
			
			
			
			
			
			
		</style>
		
	</head>
	<body>
		<!-- 画一颗心  html 1个元素-->
		<div></div>
		<audio src="renxi.mp3" autoplay></audio>
		<!-- html：元素的分类，按照元素的特点分为：
		           ①块元素：可以设置高宽，独占一行，典型的块元素：div
				   ②行元素：不可以设置高宽，可以在一行显示，典型行元素：span
				   文本内容属于行元素
				   ③行内块元素：可以设置高宽，可以在一行显示，典型行内元素：img
				   
		
		
		
		-->
	</body>
</html>